<template>
  <!-- 收费明细 -->
  <div>
    <div class="pay_box">
      <el-form>
        <el-form-item label="收费日期">
          <el-date-picker
            v-model="form.startDate"
            class="pay_date"
            type="date"
            clearable
            value-format="yyyy-MM-dd"
            placeholder="开始时间"
          ></el-date-picker>----
          <el-date-picker
            style="marigin-left:4%;"
            v-model="form.endDate"
            class="pay_date"
            type="date"
            clearable
            value-format="yyyy-MM-dd"
            placeholder="结束时间"
          ></el-date-picker>
          <el-input class="pay_date" v-model="form.patientName" clearable placeholder="患者姓名"></el-input>
          <el-input class="pay_date" v-model="form.mobile" clearable placeholder="手机号"></el-input>
          <el-select class="charge_select" v-model="form.sources" placeholder="收费项目">
            <el-option value label="全部"></el-option>
            <el-option
              v-for="(item,index) in typeList"
              :key="index"
              :value="item.id"
              :label="item.desc"
            ></el-option>
          </el-select>
          <!-- <el-input class="pay_date" v-model="form.sources" placeholder="收费项目"></el-input> -->
          <el-button type="primary" circle icon="el-icon-search" @click="getChartTable(-1)"></el-button>
          <el-button type="primary" style="float:right;" @click="exportExcel()">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pay_box">
      <table class="table-box">
        <thead>
          <tr>
            <th
              style="text-align:center;font-size:18px;"
              colspan="21"
            >{{form.startDate | changeYearMonthDay}} - {{form.endDate | changeYearMonthDay}} 收费明细</th>
          </tr>
          <tr>
            <th>收费编号</th>
            <th>门诊号</th>
            <th>患者姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>手机号</th>
            <th>就诊日期</th>
            <th>登记科室</th>
            <th>接诊医生</th>
            <th>收费时间</th>
            <th>收费人员</th>
            <th>收费分类</th>
            <th>收费项目</th>
            <th>单位</th>
            <th>数量</th>
            <th>单价</th>
            <th>费用合计</th>
            <th>折后金额</th>
            <th style="width:300px;">备注</th>
            <!-- <th>优惠分摊后金额</th> -->
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tabList" :key="index">
            <td>{{item.orderCode}}</td>
            <td>
              <label v-if="item.cure!=undefined">{{item.cure.cureCode}}</label>
              <label v-else>无</label>
            </td>
            <td>
              <label v-if="item.patientInfo!=undefined">{{item.patientInfo.name}}</label>
              <label v-else>无</label>
            </td>
            <td>
              <label v-if="item.patientInfo!=undefined">{{item.patientInfo.sex | toSex}}</label>
              <label v-else>未知</label>
            </td>
            <td>
              <label v-if="item.patientInfo!=undefined">{{item.patientInfo.age}}</label>
              <label v-else>无</label>
            </td>
            <td>
              <label v-if="item.patientInfo!=undefined">{{item.patientInfo.mobile}}</label>
              <label v-else>无</label>
            </td>
            <td>{{item.visitDate?item.visitDate:'无'}}</td>
            <td>
              <label v-if="item.hpDepartment!=undefined">{{item.hpDepartment.deptName}}</label>
              <label v-else>无</label>
            </td>
            <td>
              <label v-if="item.doctor!=undefined">{{item.doctor.trueName}}</label>
              <label v-else>无</label>
            </td>
            <td>{{item.billDate}}</td>
            <td>
              <label v-if="item.billMember!=undefined">{{item.billMember.memberName}}</label>
              <label v-else>无</label>
            </td>
            <td>{{item.itemSource | changeAssist(typeList)}}</td>
            <td>{{item.projectName}}</td>
            <td>{{item.unit | changeAssist(dwList)}}</td>
            <td>{{item.num}}</td>
            <td>￥{{item.oneMoney}}</td>
            <td>￥{{item.totalMoney}}</td>
            <td>￥{{item.afterDiscountMoney}}</td>
            <td style="width:300px;">{{item.note}}</td>
            <!-- <td>{{item.payWay.memberName}}</td> -->
          </tr>
          <tr>
            <td>合计</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>￥{{orderDayCount.totalMoney}}</td>
            <td colspan="2">￥{{orderDayCount.afterDiscountMoney}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <br />
    <pager v-model="pager" @change-pagenum="getChartTable"></pager>
  </div>
</template>
<script>
import Excel from "@/_js/excel.js";
export default {
  data() {
    return {
      form: {
        startDate: "",
        endDate: "",
        patientName: "",
        mobile: "",
        sources: "",
        type: 1
      },
      dwList: [],
      typeList: [],
      orderDayCount: "",
      showDay: false,
      pager: { pageSize: 20, pageNum: 1, total: 0 },
      tabList: []
    };
  },
  mounted() {
    this.getChartTable();
    this.getBasic();
    this.form.startDate = this.getDate();
    this.form.endDate = this.getNewDate();
  },
  methods: {
    getChartTable() {
      let th = this;
      th.showLoading();
      let j = Object.assign(th.form, th.pager);
      th.$api
        .getOrderItemDetail(j)
        .then(res => {
          if (res.executed) {
            th.tabList = res.dataBody.pageInfo.list;
            th.orderDayCount = res.dataBody.count;
            th.pager.total = res.dataBody.pageInfo.total;
            // th.pager.pageNum=1;
            th.showLoading(false);
          } else {
            th.$message.error(res.message);
            th.showLoading(false);
          }
        })
        .catch(error => {
          th.showLoading(false);
        });
    },
    getBasic() {
      let th = this;
      th.getCommonConfigByKey("收费分类").then(res => {
        th.typeList = res;
      });
      th.getCommonConfigByKey("药品剂量单位").then(res => {
        th.dwList = res;
        th.dwList.push({ id: "0", desc: "无" })
      });
    },
    exportExcel() {
      let th = this;
      //导出
      th.showLoading();
      let json = { pageSize: "500", pageNum: "1" };
      json = Object.assign(th.form, json);
      th.$api.getOrderItemDetail(json).then(res => {
        if (res.executed) {
          if (res.dataBody != undefined) {
            let list = [];
            let data = res.dataBody.pageInfo.list;
            data.map(it => {
              let arr = { remarks: it.note };
              Object.assign(
                arr,
                it,
                it.billMember,
                it.doctor,
                it.hpDepartment,
                it.cure,
                it.patientInfo
              );
              if (arr.name == "") {
                arr.name = "暂无";
              }
              list.push(arr);
            });
            let sourceType = {};
            let _list = th.typeList;
            _list.forEach(it => {
              sourceType[it.id] = it.desc;
            });
            let unit = [];
            let dwLists = th.dwList;
            dwLists.forEach(it => {
              unit[it.id] = it.desc;
            });
            Excel(
              list,
              [
                { key: "orderCode", name: "收费编号" },
                { key: "cureCode", name: "门诊号" },
                { key: "name", name: "患者姓名" },
                {
                  key: "sex",
                  name: "性别",
                  enum: { 1: "男", 2: "女", 0: "不详" },
                  type: "enum"
                },
                { key: "age", name: "年龄" },
                { key: "mobile", name: "联系电话" },
                { key: "visitDate", name: "就诊日期" },
                { key: "deptName", name: "登记科室" },
                { key: "trueName", name: "接诊医生" },
                { key: "billDate", name: "收费时间" },
                { key: "memberName", name: "收费人员" },
                {
                  key: "itemSource",
                  name: "收费分类",
                  enum: sourceType,
                  type: "enum"
                },
                { key: "projectName", name: "收费项目" },
                { key: "unit", name: "单位", type: "enum", enum: unit },
                { key: "num", name: "数量" },
                { key: "totalMoney", name: "费用合计" },
                { key: "afterDiscountMoney", name: "折后金额" },
                { key: "remarks", name: "备注" }
              ],
              "收费明细"
            );
            th.showLoading(false);
          }
        } else {
          th.$message.warning("您查询的数据过大~请合理筛选导出");
          th.showLoading(false);
        }
      });

      // th.showLoading(false);
    }
  },
  filters: {
    changeYearMonthDay(value) {
      let str = "";
      if (value) {
        str =
          value.substring(0, 4) +
          "年" +
          value.substring(5, 7) +
          "月" +
          value.substring(8, 10) +
          "日";
      }
      return str;
    }
  }
};
</script>
<style lang="scss" scoped>
.pay_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  overflow-x: auto;
  .table-box {
    min-width: 600px;
    font-size: 12px;
  }
}

.pay_date,
.charge_select {
  width: 10% !important;
  margin-right: 1%;
}
</style>